<template>
  <div class="child-left-bottom">
    <div
      :class="{
        'left-bottom-item': curFlowType !== flowCheck,
        'select-bottom-item': curFlowType === flowCheck,
      }"
      @click="handleFlowCheck"
    >
      流程审核
    </div>
    <div
      :class="{
        'left-bottom-item': curFlowType !== flowStart,
        'select-bottom-item': curFlowType === flowStart,
      }"
      @click="handleFlowStart"
    >
      流程发起
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onBeforeMount, onMounted } from 'vue';
  import VueEvent from '@/helper/event';
  import { HOME_FLOW_SWITCH, HOME_FLOW_CHECK, HOME_FLOW_START } from '@/helper/constant';
  export default defineComponent({
    name: 'FlowFooter',
    setup() {
      const state = reactive({
        curFlowType: HOME_FLOW_CHECK,
        flowCheck: HOME_FLOW_CHECK,
        flowStart: HOME_FLOW_START,
      });
      const methods = {
        handleFlowCheck() {
          // 流程审核
          state.curFlowType = HOME_FLOW_CHECK;
          VueEvent.emit(HOME_FLOW_SWITCH, HOME_FLOW_CHECK);
        },
        handleFlowStart() {
          // 流程发起
          state.curFlowType = HOME_FLOW_START;
          VueEvent.emit(HOME_FLOW_SWITCH, HOME_FLOW_START);
        },
      };
      onBeforeMount(() => {});
      onMounted(() => {});
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .child-left-bottom {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-left: 1px solid #ecedf0;
    border-right: 1px solid #ecedf0;
    border-bottom: 1px solid #ecedf0;
    .left-bottom-item {
      font-size: 14px;
      color: #3f3f3f;
      cursor: pointer;
    }
    .left-bottom-item:hover {
      color: @primary-color;
    }
    .select-bottom-item {
      font-size: 14px;
      color: @primary-color;
    }
  }
</style>
